<template>
  <div>
    <!-- 售后统计 -->
    <div class="annual-curve">
      <el-button type="primary" class="button-width"  @click="yuangong">按员工</el-button>
      <el-button type="success" class="button-width"   @click="bumen">按部门</el-button>
    </div>
    <div style="width: 1328px; height: 650px" id="myChart" v-show="show"></div>
    <div style="width: 1328px; height: 650px" id="department" v-show="AA"></div>
    
  </div>
</template>

<script>
export default {
  name: "profile",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      show:true,
      AA:false,
    };
  },
  mounted() {
    this.drawLine();
    this.Department();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "按员工统计",
        },
        xAxis: {
          type: "category",
          data: ["超级管理员", "三生三世", "陈仪"],//后端传过来的人员渲染
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [3, 0, 0],
            type: "line",
          },
        ],
      });
    },
    Department() {
      // 基于准备好的dom，初始化echarts实例
      let department = this.$echarts.init(document.getElementById("department"));
      // 绘制图表
      department.setOption({
        title: {
          text: "按部门统计",
        },
        xAxis: {
          type: "category",
          data: ["总经办", "业务一部", "业务二部", "渠道招商部", "营销部", "采购部", "财务部", "客服部"],//后端传过来的人员渲染
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [3, 0, 0, 0 ,0 ,0 ,0 ,0],//传递人员售后数据渲染
            type: "line",
          },
        ],
      });
    },
    yuangong(){
      this.show = true;
      this.AA = false;
    },
    bumen(){
      this.show = false;
      this.AA = true;
    }
  },
};
</script>
<style lang="scss">
.annual-curve {
  display: flex;
  justify-content: center;
}
.button-width {
  width: 120px;
  height: 38px;
}

</style>